<template>
  <div class="analysis-data">
    <div class="data-head">
      <div class="data-name">得分趋势分析</div>
    </div>
    <div class="data-con">
      <div class="charts" id="analysis_chart" v-if="xData.length > 0"></div>
      <div class="no_data" v-else>
        <empty></empty>
      </div>
      <!-- <div class="word">{{ sourceList.avgScoreSuggest }}</div> -->
    </div>
  </div>
</template>

<script>
import Echarts from '@libs/echarts'
export default {
  name: 'AnalysisData',
  components: {},
  props: {
    sourceList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      myChart: null,
      xData: [],
      yData: [],
    }
  },
  computed: {},
  watch: {
    sourceList: {
      handler(news) {
        if (news) {
          this.dealData(news)
        } else {
          this.xData = []
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    // this.drawChart()
  },
  methods: {
    dealData(data) {
      if (data.quarterAvgScoreList && data.quarterAvgScoreList.length) {
        const xData = []
        const yData = []
        data.quarterAvgScoreList.forEach(item => {
          xData.push(item.name)
          yData.push(item.avgScore)
        })
        this.xData = xData
        this.yData = yData
        this.$nextTick(() => {
          this.drawChart()
        })
      }
    },
    drawChart() {
      this.myChart = Echarts.init(document.getElementById('analysis_chart'))
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.xData,
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#AAAFC5', // 文字的颜色
            },
            formatter: function (params) {
              let newParamsName = ''
              const paramsNameNumber = params.length
              const provideNumber = 5 // 一行显示几个字 然后就超过字数就会自动换行
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ''
                  const start = p * provideNumber
                  const end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            },
          },
          nameLocation: 'center',
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          min: 60,
          splitNumber: 5,
          minInterval: 5,
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#AAAFC5',
            },
          },
          name: '平均分',
          nameTextStyle: {
            color: '#AAAFC5',
          },
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            symbol: 'emptyCircle',
            itemStyle: {
              // 设置symbol的颜色
              normal: {
                color: '#00E6BB',
              },
            },
            symbolSize: 8,
            areaStyle: {
              // color: '#DEF8FF',
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#DEF8FF' },
                { offset: 1, color: '#FEFFFF' },
              ]),
            },
            barWidth: 20,
            smooth: true,
            lineStyle: {
              color: '#4CEF4B',
              type: 'dashed',
            },
          },
        ],
        grid: {
          x: 40,
          y: 40,
          x2: 40,
          y2: 40,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
        },
      }
      this.myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.analysis-data {
  .data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .data-name {
      color: #56585e;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .data-con {
    margin-top: 10px;

    .charts {
      height: 250px;
      width: 100%;
    }

    .word {
      margin-top: 10px;
      color: #111111;
      font-size: 14px;
    }
  }
}
</style>
